<template>

  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form ref="queryForm" :model="queryForm" inline :label-width="70">
          <Form-item label="岗位名称" prop="jobName">
            <Input
              type="text"
              v-model="queryForm.jobName"
              clearable
              placeholder="请输入岗位名称"
              style="width: 200px"
            />
          </Form-item>
          <Form-item style="margin-left:-35px;" class="br">
            <Button @click="handleSearch" type="primary" size="large" icon="ios-search">搜索</Button>
            <Button @click="handleReset" size="large">重置</Button>
          </Form-item>
        </Form>
      </Row>
      <Row class="operation">
        <Button @click="add" size="large" type="primary" icon="md-add">添加</Button>
        <Button @click="delAll" size="large" icon="md-trash">删除</Button>
      </Row>
      <Row>
        <Alert show-icon>
          已选择
          <span class="select-count">{{selectCount}}</span> 项
          <a class="select-clear" @click="clearSelectAll">清空</a>
        </Alert>
      </Row>
      <Row>
        <Table
          :loading="loading"
          border
          :columns="columns"
          :data="data"
          sortable="custom"
          @on-selection-change="showSelect"
          ref="table"
        >
        </Table>
      </Row>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="queryForm.pageNum"
          :total="total"
          :page-size="queryForm.pageSize"
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10,20,50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
      <JobForm ref="jobModalForm" @ok="submitOk"></JobForm>
    </Card>
  </div>
</template>

<script>
import JobForm from "@/view/admin/form/JobForm";
import {queryJobList,saveJob,updateJob,deleteJob} from "@/api/job";
import {deleteRole} from "@/api/role";
export default {
  name: "Job",
  components:{
    JobForm
  },
  data(){
    return{
      queryForm:{
        pageNum:1,
        pageSize:10,
        jobName:''
      },
      sort:1,
      editIndex:-1,
      total:null,
      loading:false,
      data:[],
      selectList:[],
      selectCount:0,
      columns:[
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          type: "index",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "岗位名称",
          key: "jobName",
          align: 'center',
          minWidth: 100,
        },
        {
          title: "所属部门",
          key: "deptName",
          align: "center",
          minWidth: 100,
        },
        {
          title: "排序",
          key: "sort",
          align: "center",
          minWidth: 100,
        },
        {
          title: "创建时间",
          key: "createTime",
          sortable: true,
          align: 'center',
          minWidth: 100,
        },
        {
          title: "操作",
          key: "action",
          align: 'center',
          width: 300,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                " 编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.del(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        },
      ],
    }
  },
  methods:{
    handleSearch(){
      this.initJobList();
    },
    changePageNum(value){
      this.queryForm.pageNum=value;
    },
    changePageSize(value){
      this.queryForm.pageSize=value;
    },
    showSelect(v){
      this.selectCount=v.length;
      this.selectList=v;
    },
    initJobList(){
      this.loading=true;
      queryJobList(this.queryForm).then(res=>{
        if(res.code===200){
          this.loading=false
           this.data=res.data.records;
           this.total=res.data.total;
        }
      })
    },
    add(){
      this.$refs['jobModalForm'].add();
      this.$refs['jobModalForm'].title='添加岗位';
      this.$refs['jobModalForm'].modalType=1
    },
    clearSelectAll(){
      this.selectList=[];
      this.selectCount=0
      this.$refs.table.selectAll(false);
    },
    del(row){
      this.selectCount = 1;
      this.selectList.push(row);
      this.delAll();
    },
    delAll(){
      let that=this;
      if(that.selectList.length<=0){
        this.$Message.warning('请至少选择一条数据');
        return ;
      }
      debugger
      this.$Modal.confirm({
        title: "确认删除",
        content:"您确认要删除所选的 " + this.selectCount + " 条数据?",
        loading: true,
        onOk: () => {
          let data=this.selectList;
          let ids='';
          data.forEach(e=>{
            ids+=e.jobId+','
          })
          ids=ids.substring(0,ids.length-1);
          deleteJob(ids).then(res=>{
            if(res.code===200){
              this.$Message.success('操作成功');
            }
            this.initJobList();
            this.selectList = [];
            this.selectCount = 0;
            this.$Modal.remove()
          })
        }
      });
    },
    edit(row){
      this.$refs['jobModalForm'].edit(row);
      this.$refs['jobModalForm'].title='修改岗位';
      this.$refs['jobModalForm'].modalType=2
    },
    submitOk(){
      this.initJobList();
    },
    handleReset(){
      this.$refs['queryForm'].resetFields();
    }
  },
  mounted(){
    this.initJobList();
  }
}
</script>

<style lang="less">
@import "../../styles/table-common.less";
</style>
